<template>
  <div class="search">
    <header>
      <van-icon name="arrow-left" color="#000" size="20px" @click="back" />
      <div class="search">
        <van-search v-model="v1" shape="round" placeholder="请输入搜索关键词" />
      </div>
      <button @click="searchresult">搜索</button>
    </header>
    <div class="hotList">
      <p>热门搜索</p>
      <ul>
        <li @click="forv1(item)" v-for="item in hotList" :key="item">
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="list" >
      <!-- <van-loading v-if="!list" /> -->
      <search-list :v1="v1" :list="list" v-if="list"></search-list>
    </div>
  </div>
</template>
<script>
import searchList from "@/components/search/searchList.vue";
import { get } from "../../utils/util";
export default {
  components: { searchList },
  data() {
    return {
      hotList: ["鞋", "衣服", "热水器", "apple13"],
      v1: "",
      list: null,
      page: 1,
    };
  },
  methods: {
    back() {
      this.$router.back(-1);
    },
    searchresult() {
      if (this.v1.length == 0) {
        return false;
      } else {
        get(`/products?page=${this.page}&limit=20&keyword=${this.v1}`).then(
          (res) => {
            // console.log(res);
            this.list = res.data;
          }
        );
      }
    },
    forv1(val) {
      this.v1 = val;
    },
  },
  watch: {
    v1() {
      this.list =null;
    },
  },
};
</script>
<style lang="scss" scoped>
.search {
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;
    .van-search {
      width: 115%;
    }
    button {
      background-color: #fff;
      font-size: 16px;
    }
  }
  .hotList {
    height: 80px;
    padding: 0 10px;
    p {
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      color: #aaa;
    }
    ul {
      display: flex;
      li {
        font-size: 14px;
        padding: 5px 10px;
        border: 1px solid #ccc;
        margin-right: 10px;
      }
    }
  }
}
</style>